<template>
  <div class="c-form">
    <u--form
      :model="formValue"
      :rules="options.rules || defaultObj"
      :style="options.formStyle || defaultObj"
      :errorType="options.errorType || 'message'"
      :borderBottom="judge(options.borderBottom)"
      :labelPosition="options.labelPosition || 'left'"
      :labelWidth="options.labelWidth || 45"
      :labelAlign="options.labelAlign || 'left'"
      :labelStyle="options.labelStyle || defaultObj"
      ref="cForm"
    >
      <block v-for="(item, index) in options.formItems" :key="index">
        <u-form-item
          :ref="item.filed"
          :label="item.label || ''"
          :prop="item.prop"
          :borderBottom="judge(options.borderBottom)"
          :labelWidth="item.labelWidth || ''"
          :rightIcon="item.rightIcon || ''"
          :leftIcon="item.leftIcon || ''"
          :leftIconStyle="item.leftIconStyle || defaultObj"
          :required="item.required || false"
          @click="$emit(`${item.filed}Click`, formValue[item.filed])"
        >
          <template slot="right">
            <u-icon name="arrow-right" v-if="item.showRight"></u-icon>
          </template>

          <template v-if="item.type === 'input'">
            <u-input
              v-model="formValue[item.filed]"
              border="none"
              :placeholder="item.placeholder"
              :type="item.inputType || 'text'"
              :disabled="item.disabled || false"
            >
              <template slot="suffix">
                <!-- #ifdef MP -->
                <!-- <slot name="{{item.name}}"> </slot> -->
                <!-- 不支持拿 data 的数据用于拼接动态 slot 名字 在 v-for
                中要根据当前项的字段来拼接 slot 名字，则要将 key 指向 item 本身
                如果不想 key 指向 item，则只能拿 v-for 的 index 来拼接 slot 名字 -->
                <slot name="tab:{{index}}"></slot>
                <!-- #endif -->

                <!-- #ifdef H5 || APP-PLUS  -->
                <!-- <slot :name="item.name"> -->
                <!-- <slot :name="`tab:${item.suffixSlot}`"> </slot> -->
                <!-- #endif -->
              </template>
            </u-input>
          </template>
        </u-form-item>
      </block>
    </u--form>
    <slot name="footer"></slot>
  </div>
</template>

<!-- 插槽的使用 -->
<!-- #ifdef MP -->
<!-- <template slot="tab:{{name}}">11111</template> -->
<!-- #endif  -->

<!-- #ifdef H5  || APP-PLUS   -->
<!-- <template :slot="`tab:${name}`"></template> -->
<!-- #endif -->

<script>
export default {
  name: 'CForm',
  props: {
    formData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formValue: { ...this.formData },
      defaultObj: {}
    }
  },

  methods: {
    judge(type) {
      switch (type) {
        case false:
          return false
        case true:
          return true
        default:
          return true
      }
    },
    async validate() {
      await this.$refs.cForm.validate()
    },
    resetFields() {
      this.$refs.cForm.resetFields()
    }
  },
  mounted() {
    this.$emit('setRules', this.$refs.cForm.setRules)
  },
  watch: {
    formValue: {
      deep: true,
      handler(newValue) {
        this.$emit('update:formData', newValue)
      }
    },
    formData: {
      deep: true,
      handler(newValue) {
        this.formValue = { ...newValue }
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
